.block-layout {
  width: 100vw;
  height: 100vh;
  transition: all .3s;
  &-sider {
    width: 220px;
    height: 100vh;
    background-color: #1e3255;
    &-header {
      height: 48px;
      line-height: 48px;
      background-color: #172742;
      text-align: center;
      color: #fff;
      cursor: pointer;
      > img {
        width: 24px;
        margin-right: 8px;
      }
      > span {
        vertical-align: middle;
      }
    }
    &-menu {
      height: calc(100% - 48px);
      box-sizing: border-box;
      padding: 8px 0;
      color: #fff;
      // &-wrapper {}
      &-item {
        position: relative;
        height: 38px;
        width: 100%;
        line-height: 38px;
        cursor: pointer;
        padding-left: 8px;
        &:hover {
          background-image: linear-gradient(90deg,#1e3255,#29bece);
          &::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 100%;
            left: 0;
            top: 0;
            background-color: #29bece;
          }
        }
      }
    }
  }
  &-main {
    width: calc(100% - 220px);
    height: 100vh;
    position: absolute;
    right: 0;
    top: 0;
    transition: all .3s;
    &-header {
      height: 48px;
      line-height: 48px;
      box-sizing: border-box;
      padding: 0 8px;
      background-color: #172742;
      color: #fff;
      &-left {
        .icon {
          cursor: pointer;
        }
      }
    }
    &-content {
      height: calc(100% - 48px);
      background: #f4f5f7;
      overflow: auto;
    }
  }
  &-collapsed {
    .block-layout-sider {
      width: 60px;
    }
    .block-layout-main {
      width: calc(100% - 60px);
    }
    .block-layout-sider-header-text {
      display: none;
    }
    .block-layout-sider-menu-item-text {
      display: none;
    }
  }
}